<script setup>
import {ref} from "vue";
import { useRoute } from 'vue-router';
import {register} from "@/apps/client/utils/userApi.js";
import {showNotify} from "vant";
import router from "@/apps/client/router.js";


const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};


const route = useRoute();
const token = route.query.token; // 获取查询参数
// alert(token)

const form = ref({
  nickname: '',
  realName: '',
  phone: '',
  idNumber: '',
  gender: '1',
  position: '',
  token: token
});


const onSubmit = () => {
  // 这里可以将表单数据提交到后端
  console.log('提交数据', form.value);
  register(form.value).then((body) => {
    console.log(body)
    if (body["code"] === 200){
      showNotify({ type: 'success', message: '注册成功' });

      router.push("/user/auth");
    } else {
      showNotify({ type: 'danger', message: body["msg"] });
    }
  }).catch(error => {
    console.log(error)
    if (error.response) {
      showNotify({type: 'danger', message: error.response.data["msg"]});
    }
  })

};
</script>

<template>
  <div style="background: #EEEEEE7F; min-height: 100vh">
    <van-space direction="vertical" fill>
  <van-nav-bar title="信息登记" />

  <van-form @failed="onFailed" @submit="onSubmit" style="--van-cell-vertical-padding: 15px">
    <van-cell-group inset>

      <!-- 昵称 -->
      <van-field
          v-model="form.nickname"
          name="nickname"
          placeholder="请输入昵称"
          label="昵称"
          :rules="[{ required: true, message: '昵称不能为空' }, { min: 2, max: 16, message: '昵称长度必须在2到16个字符之间' }]"
      />

      <!-- 真实姓名 -->
      <van-field
          v-model="form.realName"
          name="realName"
          placeholder="请输入真实姓名"
          label="真实姓名"
          :rules="[{ required: true, message: '真实姓名不能为空' }, { min: 2, max: 5, message: '真实姓名长度必须在2到5个字符之间' }]"
      />

      <!-- 性别 -->
      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="form.gender" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 身份证号 -->
      <van-field
          v-model="form.idNumber"
          name="idNumber"
          placeholder="请输入身份证号"
          label="身份证号"
          :rules="[{ required: true, message: '身份证号不能为空' }, { pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/, message: '身份证号格式不正确' }]"
      />

      <!-- 手机号 -->
      <van-field
          v-model="form.phone"
          name="phone"
          placeholder="请输入手机号"
          label="手机号"
          :rules="[{ required: true, message: '手机号不能为空' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]"
      />

      <van-field
          v-model="form.position"
          name="position"
          placeholder="请输入职位"
          label="职位"
          :rules="[{ required: true, message: '职位不能为空' }, {max: 16, message: '最多16个字符' }]"
      />

    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" >
        提交
      </van-button>
    </div>
  </van-form>
    </van-space>
  </div>
</template>
<style scoped lang="less">

</style>